<template>
  <view class="create-address page">
    <div class="page-title">收件人信息 Recipient Information</div>

    <div class="form-box">
      <div class="wrap">
        <div class="form-item">
          <div class="label">城市 City</div>
          <div class="value">
            <div class="add-btn"></div>
          </div>
        </div>
        <div class="form-item">
          <div class="label">详细地址 Address</div>
          <div class="value">
            <input type="text" />
          </div>
        </div>
        <div class="form-item">
          <div class="label">收货人姓名 Recipient Name</div>
          <div class="value">
            <input type="text" />
          </div>
        </div>
        <div class="form-item">
          <div class="label">手机号 Phone Number</div>
          <div class="value">
            <input type="text" />
          </div>
        </div>
        <div class="form-item">
          <div class="checkbox"></div>
          <div class="te">默认地址 Default Addresses</div>
        </div>
      </div>
    </div>
    <div class="bottom-control-box">
      <div class="bottom-control-container">
        <div class="wrap">
          <div class="bottom-control-btn">取消 Cancel</div>
          <div class="bottom-control-btn">保存 Save</div>
        </div>
        <bottom-safe-area></bottom-safe-area>
      </div>
      <div>
        <div style="height: 100rpx"></div>
        <bottom-safe-area></bottom-safe-area>
      </div>
    </div>
  </view>
</template>

<script setup>
import {
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
  watch,
  computed
} from 'vue'
</script>

<style lang="scss" scoped>
@import './createAddress.scss';
</style>
